.main {
  display: flex;
  align-items: center;
  padding: 5rem;
}

.main img {
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.big-box {
  margin: 1rem;
}

.big-box img {
  width: 30vw;
}

.small-box img {
  width: 15vw;
  margin-left: 1rem;
}

.small-box > div {
  display: flex;
  margin: 1rem;
}

.d1 {
  animation-delay: 1s;
}

.d2 {
  animation-delay: 1.5s;
}

.d3 {
  animation-delay: 2s;
}

.d4 {
  animation-delay: 2.5s;
}

.d5 {
  animation-delay: 3s;
}

/* 
  3 3 8 8 = 24
  
  有不限数量的材质均匀的绳子，烧完整个绳子需要30分钟
  如何用这些绳子精准的计算1小时15分钟

  计算一下常德市有多少家奶茶店
*/

.progress-bar {
  width: 20vw;
  height: 2rem;
  margin: 1rem auto;
  box-sizing: border-box;
  border: 1px solid #f00;
  border-radius: 2rem;
  overflow: hidden;
}

.progress-bar > div {
  height: 100%;
  background-color: #f00;
  /* border-radius: 2rem; */
  width: 0%;
  transition: width 1s;
}

.progress-bar:hover > div {
  width: 100%;
}
